<template>
  <div class="chart-container">
    <h2>天气信息表</h2>
    <div id="weatherChart" class="chart"></div>
    
    <div class="chart-controls">
      <el-input v-model="searchKeyword" placeholder="搜索特征字段" class="search-input" />
      <el-button type="primary" @click="searchFeatures">搜索</el-button>
      <el-button @click="resetSearch">重置</el-button>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'WeatherChart',
  props: {
    year: {
      type: String,
      default: '2023'
    },
    region: {
      type: String,
      default: 'northChina'
    }
  },
  data() {
    return {
      searchKeyword: '',
      chartInstance: null,
      featureFields: ['temperature', 'humidity', 'rainfall', 'windSpeed', 'pressure'],
      featureNames: {
        temperature: '温度(°C)',
        humidity: '湿度(%)',
        rainfall: '降雨量(mm)',
        windSpeed: '风速(m/s)',
        pressure: '气压(hPa)'
      },
      colors: ['#145A32', '#D4EFDF', '#3498DB', '#F39C12', '#E74C3C'],
      weatherDataByYear: {
        '2022': {
          dates: ['2022-01-01', '2022-01-02', '2022-01-03', '2022-01-04', '2022-01-05', '2022-01-06', '2022-01-07', '2022-01-08', '2022-01-09', '2022-01-10'],
          temperature: [12, 13, 11, 15, 17, 19, 18, 16, 14, 13],
          humidity: [68, 72, 76, 62, 58, 53, 55, 65, 70, 74],
          rainfall: [0, 8, 12, 0, 0, 0, 3, 10, 5, 8],
          windSpeed: [3.5, 3.1, 4.8, 4.2, 2.4, 2.1, 2.8, 4.1, 4.5, 3.0],
          pressure: [1015, 1014, 1012, 1017, 1020, 1022, 1021, 1018, 1016, 1014]
        },
        '2023': {
          dates: ['2023-01-01', '2023-01-02', '2023-01-03', '2023-01-04', '2023-01-05', '2023-01-06', '2023-01-07', '2023-01-08', '2023-01-09', '2023-01-10'],
          temperature: [14, 15, 13, 17, 19, 21, 20, 18, 16, 15],
          humidity: [66, 71, 76, 61, 56, 51, 53, 64, 69, 73],
          rainfall: [0, 6, 14, 0, 0, 0, 2, 9, 4, 9],
          windSpeed: [3.3, 2.9, 4.6, 4.0, 2.2, 1.9, 2.6, 3.9, 4.3, 2.8],
          pressure: [1014, 1013, 1011, 1016, 1019, 1021, 1020, 1017, 1015, 1013]
        },
        '2024': {
          dates: ['2024-01-01', '2024-01-02', '2024-01-03', '2024-01-04', '2024-01-05', '2024-01-06', '2024-01-07', '2024-01-08', '2024-01-09', '2024-01-10'],
          temperature: [15, 16, 14, 18, 20, 22, 21, 19, 17, 16],
          humidity: [65, 70, 75, 60, 55, 50, 52, 63, 68, 72],
          rainfall: [0, 5, 15, 0, 0, 0, 2, 8, 3, 10],
          windSpeed: [3.2, 2.8, 4.5, 3.9, 2.1, 1.8, 2.5, 3.8, 4.2, 2.7],
          pressure: [1013, 1012, 1010, 1015, 1018, 1020, 1019, 1016, 1014, 1012]
        }
      },
      weatherDataByRegion: {
        'northChina': {
          temperatureAdjustment: 0,
          humidityAdjustment: 0,
          rainfallAdjustment: 0,
          windSpeedAdjustment: 0,
          pressureAdjustment: 0
        },
        'eastChina': {
          temperatureAdjustment: 1,
          humidityAdjustment: 3,
          rainfallAdjustment: 2,
          windSpeedAdjustment: -0.2,
          pressureAdjustment: -1
        },
        'southChina': {
          temperatureAdjustment: 4,
          humidityAdjustment: 8,
          rainfallAdjustment: 5,
          windSpeedAdjustment: -0.5,
          pressureAdjustment: -3
        },
        'northwestChina': {
          temperatureAdjustment: -1,
          humidityAdjustment: -5,
          rainfallAdjustment: -3,
          windSpeedAdjustment: 0.5,
          pressureAdjustment: 2
        },
        'southwestChina': {
          temperatureAdjustment: 2,
          humidityAdjustment: 5,
          rainfallAdjustment: 3,
          windSpeedAdjustment: 0,
          pressureAdjustment: -2
        }
      }
    }
  },
  computed: {
    currentWeatherData() {
      // 获取基础数据
      const baseData = this.weatherDataByYear[this.year] || this.weatherDataByYear['2023']
      const regionAdjustments = this.weatherDataByRegion[this.region] || this.weatherDataByRegion['northChina']
      
      // 创建调整后的数据副本
      const adjustedData = JSON.parse(JSON.stringify(baseData))
      
      // 应用区域调整
      this.featureFields.forEach(field => {
        const adjustmentKey = field + 'Adjustment'
        if (regionAdjustments[adjustmentKey] !== undefined) {
          adjustedData[field] = adjustedData[field].map(value => {
            // 对不同类型的数据使用不同的调整逻辑
            if (field === 'temperature') {
              return value + regionAdjustments[adjustmentKey]
            } else if (field === 'humidity' || field === 'rainfall') {
              return Math.max(0, value + regionAdjustments[adjustmentKey])
            } else if (field === 'windSpeed' || field === 'pressure') {
              return value + regionAdjustments[adjustmentKey]
            }
            return value
          })
        }
      })
      
      return adjustedData
    }
  },
  watch: {
    year: {
      handler() {
        this.updateChartData()
      }
    },
    region: {
      handler() {
        this.updateChartData()
      }
    }
  },
  methods: {
    initChart() {
      const chartDom = document.getElementById('weatherChart')
      this.chartInstance = echarts.init(chartDom)
      
      const option = {
        title: {
          text: `${this.year}年天气信息多特征趋势`,
          left: 'center',
          textStyle: {
            color: '#145A32',
            fontWeight: 'bold'
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: this.featureFields.map(field => this.featureNames[field]),
          bottom: 0
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          top: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.currentWeatherData.dates,
          axisLabel: {
            rotate: 30
          }
        },
        yAxis: {
          type: 'value'
        },
        series: this.featureFields.map((field, index) => ({
          name: this.featureNames[field],
          type: 'line',
          data: this.currentWeatherData[field],
          smooth: true,
          itemStyle: {
            color: this.colors[index % this.colors.length]
          },
          lineStyle: {
            width: 2
          }
        }))
      }
      
      this.chartInstance.setOption(option)
    },
    
    updateChartData() {
      if (!this.chartInstance) return
      
      const option = this.chartInstance.getOption()
      option.title[0].text = `${this.year}年天气信息多特征趋势`
      option.xAxis[0].data = this.currentWeatherData.dates
      option.series = this.featureFields.map((field, index) => ({
        name: this.featureNames[field],
        type: 'line',
        data: this.currentWeatherData[field],
        smooth: true,
        itemStyle: {
          color: this.colors[index % this.colors.length]
        },
        lineStyle: {
          width: 2
        }
      }))
      
      this.chartInstance.setOption(option)
    },
    
    searchFeatures() {
      if (!this.chartInstance || !this.searchKeyword) {
        this.resetSearch()
        return
      }
      
      const filteredFields = this.featureFields.filter(field => 
        this.featureNames[field].toLowerCase().includes(this.searchKeyword.toLowerCase())
      )
      
      const option = this.chartInstance.getOption()
      option.series = filteredFields.map((field, index) => ({
        name: this.featureNames[field],
        type: 'line',
        data: this.currentWeatherData[field],
        smooth: true,
        itemStyle: {
          color: this.colors[index % this.colors.length]
        },
        lineStyle: {
          width: 2
        }
      }))
      option.legend.data = filteredFields.map(field => this.featureNames[field])
      
      this.chartInstance.setOption(option)
    },
    
    resetSearch() {
      this.searchKeyword = ''
      if (this.chartInstance) {
        this.updateChartData()
      }
    },
    
    resizeChart() {
      if (this.chartInstance) {
        this.chartInstance.resize()
      }
    }
  },
  mounted() {
    this.initChart()
    window.addEventListener('resize', this.resizeChart)
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.resizeChart)
    if (this.chartInstance) {
      this.chartInstance.dispose()
    }
  }
}
</script>

<style scoped>
.chart-container {
  background: var(--color-card-bg);
  border-radius: 8px;
  padding: 20px;
  box-shadow: var(--color-shadow);
  margin-bottom: 30px;
}

.chart {
  width: 100%;
  height: 400px;
  margin-bottom: 20px;
}

.chart-controls {
  display: flex;
  gap: 10px;
  align-items: center;
}

.search-input {
  width: 200px;
}

h2 {
  color: var(--color-primary);
  font-size: 1.8rem;
  margin-bottom: 15px;
  text-align: center;
}
</style>